<template>
  <el-dialog :visible="visible" width="25%" @close="resetForm">
    <el-form ref="elForm" :model="formData" :rules="rules" label-width="100px">
      <el-form-item label="栏目名称" prop="advertName">
        <el-select
          v-model="formData.advertName"
          style="width: 100%"
          placeholder="请选择栏目名称"
          clearable
        >
          <el-option
            v-for="(item, index) in SECTION_TYPE_LABEL"
            :key="index"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item class="footer-button" style="text-align: right">
        <el-button @click="resetForm"> 取消 </el-button>
        <el-button type="primary" @click="submitForm"> 确定 </el-button>
      </el-form-item>
    </el-form>
  </el-dialog>
</template>

<script>
import { SECTION_TYPE_LABEL } from '@/enum'
import { mapMutations } from 'vuex'
export default {
  name: 'SectionPopup',
  components: {},
  props: {
    value: [Number, String],
    dialogVisible: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      formData: {
        advertName: ''
      },
      rules: {
        advertName: [
          {
            required: true,
            message: '请选择栏目名称',
            trigger: 'change'
          }
        ]
      }
    }
  },
  computed: {
    SECTION_TYPE_LABEL() {
      return SECTION_TYPE_LABEL
    },
    visible: {
      get() {
        return this.dialogVisible
      },
      set(val) {
        this.$emit('update:dialogVisible', val)
      }
    }
  },
  created() {
    this.init()
  },
  mounted() {},
  methods: {
    ...mapMutations('base', ['SET_POINT_SELECT']),
    init() {
      const flag = this.SECTION_TYPE_LABEL.some(item => item.value === Number(this.value))
      const { advertName } = this.formData.advertName
      this.formData.advertName = advertName ? advertName : flag ? Number(this.value) : ''
    },
    submitForm() {
      this.$refs['elForm'].validate(valid => {
        if (!valid) return
        this.$emit('input', this.formData.advertName)
        const name = this.SECTION_TYPE_LABEL.filter(
          item => item.value == this.formData.advertName
        )[0].label
        this.SET_POINT_SELECT({ key: 'sectionName', data: name })
        this.visible = false
      })
    },
    resetForm() {
      this.visible = false
      if (!this.value) {
        this.$emit('input', '')
      }
      this.$refs['elForm'].resetFields()
    }
  }
}
</script>

<style lang="scss" scoped>
.footer-button {
  margin: 40px 0 0;
}
</style>
